import Taro from '@tarojs/taro';
import { Image } from '@tarojs/components';
import useNeedPhone from '@/common/hook/useNeedPhone';
import styles from './index.module.less';
import { useUserStore } from '@/common/hox/userStore';
import { withPageContainer } from '@/components';
import { ArrowRight, Coupon } from '@nutui/icons-react-taro';
import { defaultAvatar, defaultNickName } from '@/utils';
const page = () => {
    const needPhone = useNeedPhone();
    const { userInfo, reAuthAsync, clear, refreshUserAsync } = useUserStore();

    // 退出
    const logout = async () => {
        await clear();
        setTimeout(async () => {
            await reAuthAsync();
            await refreshUserAsync();
        }, 100);
    };

    return (
        <div className={styles.page}>
            <div className={styles.header}>
                <div className={styles.userInfo}>
                    <Image className={styles.avatar} src={userInfo?.avatarUrl || defaultAvatar} />
                    <div className={styles.nameWrap}>
                        <div className={styles.name}>
                            嗨~，
                            {(userInfo?.nickName && userInfo?.nickName != userInfo?.mobile) ||
                                defaultNickName}
                        </div>
                        <div className={styles.nameMsg}>
                            {userInfo?.mobile
                                ? userInfo.mobile.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
                                : `${userInfo?.openId ? '绑定' : '登录'}手机号,获取更多优惠福利`}
                        </div>
                    </div>
                    {!userInfo?.mobile && (
                        <div className={styles.loginBtn} onClick={() => needPhone.redirect()}>
                            立即{userInfo?.openId ? '绑定' : '登录'}
                        </div>
                    )}
                    {userInfo?.userId && userInfo?.mobile && (
                        <div className={styles.loginBtn} onClick={async () => await logout()}>
                            退出登录
                        </div>
                    )}
                </div>
            </div>
            <div className={styles.tips}></div>
            {/* 可自行添加功能 */}
        </div>
    );
};

export default withPageContainer(page);
